<script>
import Api from "@/api/video";
import store from "@/store";


export default {
  data() {
    return {
      list: [],
      prefix: "/playVideo?web_code=",
      img: "http://localhost:9000/static/cover/",
      last: ".png"
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      if (this.$route.query.keys) {
        Api.searchVideo(this.$route.query.keys).then(res => {
          this.list = res.data;
        })
      } else {
        Api.getVideo().then(
            res => {
              this.list = res.data
            }
        )
      }
    },
    searchData() {
      Api.searchVideo(store.state.search.key).then(
          res => {
            this.list = res.data;
            console.log(this.list)
          }
      )
    }
  }
}

</script>

<template>
  <div class="page-container">
    <div class="hot-video">
      <el-row :gutter="50">
        <el-col v-for="i in list" :span="6">
          <router-link :to="prefix+i.webCode">
            <el-card class="video-card">
              <img :src="img+i.cover+last" class="video-img" alt="1">
              <p class="description">&nbsp;&nbsp;&nbsp;&nbsp;{{ i.title }}</p>
              <p class="time">&nbsp;&nbsp;&nbsp;&nbsp;浏览量：{{ i.watchMount }}</p>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
      <!--  <div class="grid-container">-->
      <!--    <div class="grid-item" v-for="i in list">-->
      <!--      <div class="video-container">-->
      <!--        <router-link :to="prefix+i.webCode">-->
      <!--          <div class="video-img">-->
      <!--            <img :src="img+i.cover+last" alt="1">-->
      <!--          </div>-->
      <!--        </router-link>-->
      <!--        &lt;!&ndash;        <div class="video-img-show">&ndash;&gt;-->
      <!--        &lt;!&ndash;          浏览量&ndash;&gt;-->
      <!--        &lt;!&ndash;        </div>&ndash;&gt;-->
      <!--        <div class="video-name">-->
      <!--          {{ i.title }}-->
      <!--        </div>-->
      <!--        <div class="video-info">-->
      <!--          浏览量：{{ i.watchMount }}-->
      <!--        </div>-->
      <!--      </div>-->
      <!--    </div>-->
    </div>
  </div>
</template>

<style scoped>
.page-container {
  margin: auto;
  width: 90%;
  padding-top: 40px;
}

.video-container {
  width: 263px;
  height: 300px;
  margin-top: 2em;
}

.video-img {
  width: 263px;
  height: 148px;
}

.video-img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); /* 设置遮罩层的背景颜色或渐变 */
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.66);
}

.video-img video {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.video-img-show {
  width: 100%;
  height: 25px;
  position: relative;
  top: -25px;
  color: #f2f2f2;
  padding-left: 2em;
}

.video-name {
  padding-left: 0.5em;
  margin-top: 10px;
  font-family: "HarmonyOS Sans SC";
}

.video-info {
  font-family: "HarmonyOS Sans SC";
}


.grid-container {
  display: flex;
  flex-wrap: wrap;
  padding-left: 2em;
  user-select: none;
}

.grid-item {
  width: 20%;
}

.video-card {
  width: 280px;
  margin-bottom: 2rem;
  padding: 0;
}

:deep(.hot-video .el-card__body) {
  padding: 0;
  height: 220px;
}

.description {
  padding-top: 4px;
  font-size: 14px;
  font-weight: bold;
  font-family: "HarmonyOS Sans SC";
}
.time{
  font-size: 14px;
  font-family: "HarmonyOS Sans SC";
}

.video-img {
  width: 100%;
  height: 165px;
  border-radius: 6px 6px 0 0;
}

.hot-video a{
  text-decoration: none;
}
</style>
